<template>
	<section v-loading="listLoading">
		
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.orderSn" placeholder="订单号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.name" placeholder="收货人姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="filters.phone" placeholder="收货人手机号码"></el-input>
				</el-form-item>
				<el-form-item prop="userId">
			        <el-select v-model="filters.userId" clearable filterable remote reserve-keyword placeholder="请输入下单用户手机号码" :remote-method="remoteMethod">
                        <el-option v-for="item in userList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                    </el-select>
			    </el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" v-on:click="handleCurrentChange(1)">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="users" stripe highlight-current-row @selection-change="selsChange" border style="width: 100%;">
			<el-table-column label="订单号" prop="orderSn" min-width="150" align="center"></el-table-column>
	        <el-table-column label="订单类型" prop="orderType" min-width="90" align="center">
	        	<template slot-scope="scope">
	        		<el-tag v-if="scope.row.orderType == 0" type="success" size="mini">普通订单</el-tag>
	        		<el-tag v-if="scope.row.orderType == 1" type="warning" size="mini">团购订单</el-tag>
	        	</template>
	        </el-table-column>
	        <el-table-column label="下单人信息" min-width="120" align="center">
	        	<template slot-scope="scope">
	        		<div v-if="scope.row.userInfo">{{scope.row.userInfo.nickname}}</div>
	        		<div v-if="scope.row.userInfo">{{scope.row.userInfo.mobile}}</div>
	        	</template>
	        </el-table-column>
	        <el-table-column label="收货/自提人信息" min-width="150" align="center">
	        	<template slot-scope="scope">
	        		<div>{{scope.row.consignee}}</div>
	        		<div>{{scope.row.mobile}}</div>
	        	</template>
	        </el-table-column>
	        <el-table-column prop="address" label="收货地址" min-width="130" align="center"></el-table-column>
	        <el-table-column label="商品信息" prop="goodsInfo.name" min-width="80" align="center">
	        	<template slot-scope="scope">
            		<el-button size="small" type="text"  @click="handlegoods(scope.row)">商品信息</el-button>
            	</template>
	        </el-table-column>
	        <el-table-column prop="message" label="备注" min-width="80" align="center"></el-table-column>
	        <el-table-column prop="freightPrice" label="运费" min-width="80" align="center"></el-table-column>
	        <el-table-column prop="couponPrice" label="优惠金额" min-width="80" align="center"></el-table-column>
	        <el-table-column prop="orderPrice" label="订单金额" min-width="80" align="center"></el-table-column>
	        <el-table-column label="类型" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<span>{{scope.row.freightType===0?'邮寄':'自提'}}</span>
	        	</template>
	        </el-table-column>
	        <el-table-column label="状态" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<span>待付款</span>
	        	</template>
	        </el-table-column>
			<el-table-column prop="addTime" label="创建时间" :formatter="formatDate"  min-width="110" align="center"/>
			<!--<el-table-column label="操作" width="100" align="center">
				<template slot-scope="scope">
					<el-button size="mini" plain type="danger"  @click="handleCancel(scope.row.id)">取消订单</el-button>
				</template>
			</el-table-column>-->
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--规格-->
        <el-dialog :visible.sync="goodsVisible" :close-on-click-modal="false"  title="商品信息" width="800px">
            <el-table ref="table" :data="goodsList" size="small" style="width: 100%;" border  stripe highlight-current-row>
	        	<el-table-column  label="图片" width="80" align="center">
		            <template slot-scope="scope">
	    	    	    <el-popover placement="top-start" title="" trigger="click">
	                        <img :src="scope.row.picUrl" alt="" style="width: 500px;">
	                        <img slot="reference" :src="scope.row.picUrl" style="width: 40px;height: 40px;object-fit: cover;border-radius: 5px;">
	                    </el-popover>
			        </template>
		        </el-table-column>
		        <el-table-column prop="goodsName" label="名称" min-width="50" align="center">
		        </el-table-column>
		         <el-table-column  prop="specifications[0]" label="规格" min-width="50" align="center">
		        </el-table-column>
		        <el-table-column  prop="price" label="价格" min-width="50" align="center">
		        </el-table-column>
		        <el-table-column prop="number" label="数量" min-width="50" align="center">
		        </el-table-column>
	        </el-table>
        </el-dialog>
	</section>
</template>

<script>
	import { client } from '../../common/js/alioss'
	export default {
		data() {
			return {
				filters: {
					phone: '',
					name:'',
					orderSn:'',
					userId:''
				},
				userList:[],
				users: [],
				option:[],
				list:[],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				photoFormVisible: false,
				photoForm:{
					photo:''
				},
				goodsList:[],
				goodsVisible:false
			}
		},
		methods: {
			
			//时间转换开始时间 
			formatDate(row, column) {
                let date = new Date(parseInt(row.addTime));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
            },
            
            selsChange: function (sels) {
				this.sels = sels;
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取列表
			getUsers:function (){
				this.listLoading = true;
				let para = {
					page: this.page,
					size: this.pageSize,
					phone: this.filters.phone,
					name: this.filters.name,
					orderSn: this.filters.orderSn,
					userId: this.filters.userId,
					status: 0
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
			    });  
			    instance.post('admin/order/orderList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.total = res.total;
						this.users = res.rows;
						this.listLoading = false;
					}
				});
			},
			
			//取消订单
			handleCancel(id){
				this.$confirm('确定取消吗?', '提示', {}).then(() => {
					this.listLoading = true;
					this.$http.post('shop/order/editOrder', this.qs.stringify({orderId: id,status:3})).then(data => {
						
						let  res = data.data;
						if (res.code !== 200) {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						} else {
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.getUsers();
						}
					})
				}).catch(() => {

				});
			},
			//商品信息
			handlegoods(row){
				this.goodsList = row.goodsList
				this.goodsVisible = true
			},
			remoteMethod(query){
				if (query !== '') {
		          setTimeout(() => {
		            this.getUserList(query)
		          }, 200);
		        } else {
		          this.userList = [];
		        }
			},
			//搜索获取用户
			getUserList(query){
				let para = {
					phone: query,
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				});  
				instance.post('admin/common/getUserSelectEntity', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					this.userList = res;
				}); 
			}
			
		},
		mounted() {
			this.getUsers();
		}
	}

</script>
<style>
	.detail{
	  	display: flex;
	  	flex-direction: row;
	  	padding: 10px 0px;
	}
	.detailDiv{
	  	font-weight: bold;
	  	color: #000000;
	  	width: 150px;
	}
	.detailDiv1{
	  	color: #000000;
	}
</style>
